<template>
    <div class="mes-region">
        <el-input
            v-model="showName"
            :placeholder="placeholder"
            @focus="treeDialog">
            <el-button
                slot="append"
                icon="el-icon-search"
                @click="treeDialog"/>
        </el-input>
        <el-input
            :value="value"
            style="display: none"/>
        <el-dialog
            :visible.sync="visibleTree"
            :modal="false"
            :title="placeholder"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="360px">
            <el-form
                :inline="true"
                size="mini">
                <el-form-item :label="$t('keyword')">
                    <el-input v-model="filterText"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="default">
                        {{ $t('query') }}
                    </el-button>
                </el-form-item>
            </el-form>
            <el-tree
                ref="tree"
                :data="dataList"
                :default-expanded-keys="expandedKeys"
                :props="{ label: 'name', children: 'children' }"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                :highlight-current="true"
                class="filter-tree"
                node-key="id"/>
            <template slot="footer">
                <el-button
                    type="default"
                    size="mini"
                    @click="cancelHandle()">
                    {{ $t('cancel') }}
                </el-button>
                <el-button
                    type="info"
                    size="mini"
                    @click="clearHandle()">
                    {{ $t('clear') }}
                </el-button>
                <el-button
                    type="primary"
                    size="mini"
                    @click="commitHandle()">
                    {{ $t('confirm') }}
                </el-button>
            </template>
        </el-dialog>
    </div>
</template>
<style lang="scss">
.mes-region {
    .filter-tree {
        max-height: 230px;
        overflow: auto;
    }
    .el-dialog__body {
        padding: 0px 0px 0px 20px;
    }
    .el-dialog__footer {
        padding: 10px 20px 8px 20px;
    }
}
</style>
<script>
import { treeDataTranslate } from '@/utils';
export default {
    name: 'MesRegionTree',
    props: {
        value: [Number, String],
        parentName: String,
        placeholder: String
    },
    data() {
        return {
            filterText: '',
            visibleTree: false,
            dataList: [],
            showName: '',
            expandedKeys: null,
            defaultProps: {
                children: 'children',
                label: 'name'
            }
        };
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },
        parentName(val) {
            this.showName = val;
        }
    },
    methods: {
        treeDialog() {
            this.expandedKeys = null;
            if (this.$refs.tree) {
                this.$refs.tree.setCurrentKey(null);
            }
            this.visibleTree = true;
            this.getDataList(this.value);
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        getDataList(id) {
            return this.$http.get('/sys/region/tree').then(({ data: res }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg);
                }
                this.dataList = treeDataTranslate(res.data);
                this.$nextTick(() => {
                    this.$refs.tree.setCurrentKey(id);
                    this.expandedKeys = [id];
                });
            }).catch(() => {});
        },
        cancelHandle() {
            this.visibleTree = false;
            this.dataList = [];
            this.filterText = '';
        },
        clearHandle() {
            this.$emit('input', '0');
            this.$emit('update:parentName', '');
            this.showName = '';
            this.visibleTree = false;
            this.dataList = [];
            this.filterText = '';
        },
        commitHandle() {
            const node = this.$refs.tree.getCurrentNode();
            if (!node) {
                this.$message.error(this.$t('choose'));
                return;
            }
            this.$emit('input', node.id);
            this.$emit('update:parentName', node.name);
            this.showName = node.name;
            this.visibleTree = false;
            this.dataList = [];
            this.filterText = '';
        }
    }
};
</script>
